<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	.space {
		height: 200px;
	}
	.camera {
		height: 200px;
		min-height: 80px;
		max-height: 200px;
		color: #FFF;
		font-size: 0.7rem;
		background-image: url(../../image/demo/shop.png)
	}
	.camera:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		z-index: -1;
	}
	.camera img {
		height: 1.8rem;
	}
	.picList {
		padding: 1px;
	}
	.picList li {
		float: left;
		width: 33.333%;
		padding: 1px;
	}
	.picList .item {
		position: relative;
	}
	.picList .item .photo {
		height: 0;
		padding-bottom: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.picList .item .checkIco {
		position: absolute;
		right: 0rem;
		top: 0rem;
		width: 1.75rem;
		height: 1.75rem;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 1.2rem auto;
		background-image: url(../../image/publish/07.png);
	}
	.picList .on .item .checkIco {
		background-image: url(../../image/publish/08.png);
	}
</style>
</head>

<body>
	<div id="app">
		<div class="space"></div>
		<div class="topFix camera aui-flex-row aui-flex-middle aui-flex-center bgCover" tapmode onclick="openCamera();">
			<div class="cameraIco"><img src="../../image/publish/09.png" alt=""></div>
			<div class="cameraTxt">拍照</div>
		</div>
		<ul class="picList aui-flex-col">
			<li v-for="photo in photos" :class="activeClass(photo)">
				<div class="item" :data-src="photo.path">
					<div class="photo" :style=" {'background-image': 'url(' + photo.thumbPath + ')' }" tapmode onclick="openPhoto(this);"></div>
					<div class="checkIco" v-tap="[checkPic,photo]"></div>
				</div>
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vue-tap.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var photoBrowser;
var UIAlbumBrowser;
var loadFlag = true;

var labelItem = {
	image:"",
	originalPath: '',
	labelData:[]
}

var vuedata = {
	photos: [],
	publish_label: [],	//保存的数据  这个页面不改这个数据  只是往里添加
	publish_label_path: [],	//保存的数据 path 单独拼成数组
	new_label_path: [],		//新添加的path
}
var vm = new Vue({
	el: '#app',
	data: vuedata,
	methods: {
		activeClass: function(photo) {
			var clas = '';
			if(vuedata.publish_label_path.indexOf(photo.path) > -1 || vuedata.new_label_path.indexOf(photo.path) > -1){
				clas = 'on';
			}
			return clas;
		},
		checkPic: function(it){
			var oldInd = parseInt( vuedata.publish_label_path.indexOf(it.path) );
			var newInd = parseInt( vuedata.new_label_path.indexOf(it.path) );
			if(oldInd > -1){
				vuedata.publish_label.splice(oldInd,1);
				vuedata.publish_label_path.splice(oldInd,1);
			}else if(newInd > -1){
				vuedata.new_label_path.splice(newInd,1);
			}else{
				if( getTotalNum() >= 9){
					openAlertMask('最多可选9张照片');
					return;
				}else{
					vuedata.new_label_path.push(it.path);
				}
			}
			api.execScript({
				script:'changeData("#pickNum",'+ getTotalNum() +');'
			});
		}
	}
});
apiready = function() {
	if( getPrefs('_PUBLISH_LABEL_') ){
		vuedata.publish_label = getPrefs('_PUBLISH_LABEL_');
		for(var i=0;i<vuedata.publish_label.length;i++){
			vuedata.publish_label_path.push(vuedata.publish_label[i].originalPath);
		}
		api.execScript({
			script:'changeData("#pickNum",'+ getTotalNum() +');'
		});
	}

	photoBrowser = api.require('photoBrowser');
	UIAlbumBrowser = api.require('UIAlbumBrowser');
	wScroll();
	getPic();
	// 监听到达底部
	api.addEventListener({
	  name:'scrolltobottom',
	  extra:{
		  threshold: 200
	  }
	}, function(ret, err){
		if(loadFlag){
			getMorePic();
		}
	});
};
//页面滚动 顶部高度变小
function wScroll(){
	$$(window).scroll(function(){
		var scrollTop = $$('body').scrollTop();
		var space = 200-scrollTop;
		$$('.camera').css("height",space+'px');
		if(space>120){
			$$('.cameraTxt').removeClass('aui-hide');
		}else{
			$$('.cameraTxt').addClass('aui-hide');
		}
	});
}
//获取图片列表
function getPic(){
	UIAlbumBrowser.scan({
		type: 'image',
		count: 30,
		sort: {
			key: 'time',
			order: 'desc'
		},
		thumbnail: {
			w: 300,
			h: 300
		}
	}, function(ret) {
		if (ret) {
			vuedata.photos = ret.list;
		}
	});
}
function getMorePic(){
	UIAlbumBrowser.fetch(function(ret, err) {
		if (ret) {
			if(ret.list.length){
				vuedata.photos = vuedata.photos.concat(ret.list);
			}else{
				//loadFlag = false;
			}
		}
	});
}

//获取总数量
function getTotalNum(){
	var num = vuedata.publish_label.length + vuedata.new_label_path.length;
	return num;
}

//下一步
function save(){
	if( getTotalNum() < 1 ){
		toast('请选择照片');
		return;
	}
	var len = vuedata.new_label_path.length;
	if(!len){
		openNext();
		return;
	}
	showProgress();
	var count = 0;
	for( var i=0;i<len;i++ ){
		(function(index){
			UIAlbumBrowser.transPath({
				path: vuedata.new_label_path[index]
			}, function(ret, err) {
				if (ret && ret.path) {
					api.ajax({
						url: BASE_URL + 'Upload/Index/upload',
						method: 'post',
						data: {
							files: {
								file: ret.path
							}
						}
					},function(ret,err){
						if (ret && ret.code == 1) {
							var obj = {
								image: ret.data.url,
								originalPath: vuedata.new_label_path[index],
								labelData: []
							}
							vuedata.publish_label.push(obj);
							vuedata.publish_label_path.push(vuedata.new_label_path[index]);
						}
						count++;
						if(count == len){
							hideProgress();
							openNext();
						}
					});

				}
			});
		})(i);
	}

	
}
function openNext(){
	setPrefs('_PUBLISH_LABEL_',vuedata.publish_label);
	vuedata.new_label_path = [];
	setTimeout(function(){
		api.openWin({
			name: 'publish_next',
			url: 'publish_next.html',
			bounces: false,
			reload: true,
			slidBackEnabled: false
		});
	},50);
}

//打开大图浏览
function openPhoto(el){
	var src = $$(el).parent('.item').data('src');
	var activeIndex = 0;
	var allImgArr = [src];
	photoBrowser.open({
	    images: allImgArr,
		activeIndex: activeIndex,
	    placeholderImg: '',
	    bgColor: '#000'
	}, function(ret, err) {
	    if (ret) {
			if(ret.eventType == 'show'){
				api.openFrame({
					name: 'photo_close',
					url: '../other/photo_close.html',
					rect: {
						x: 10,
						y: 25,
						w: 40,
						h: 40
					},
					pageParam: {
						winName: api.winName,
						frmName: api.frameName
					},
					bounces: false,
					bgColor: 'rgba(0,0,0,0)'
				});
				api.openFrame({
					name: 'photo_page',
					url: '../other/photo_page.html',
					rect: {
						x: 0,
						y: api.winHeight - 60,
						w: 'auto',
						h: 60
					},
					pageParam: {
						winName: api.winName,
						frmName: api.frameName,
						current: activeIndex,
						total: allImgArr.length,
						downloadBtn: false
					},
					bounces: false,
					bgColor: 'rgba(0,0,0,0)'
				});
			}
			if(ret.eventType == 'change'){
				api.execScript({
				    frameName: 'photo_page',
				    script: 'changeCurrent("'+ret.index+'","'+allImgArr.length+'");'
				});
			}

	    }
	});
}
//关闭大图
function closePhoto(){
	photoBrowser.close();
	api.closeFrame({
	    name: 'photo_close'
	});
	api.closeFrame({
	    name: 'photo_page'
	});
}

//拍照
function openCamera(){
	if(vuedata.checkLen >= 9){
		openAlertMask('最多可选9张照片');
		return;
	}
	api.getPicture({
		sourceType: 'camera',
		encodingType: 'jpg',
		mediaValue: 'pic',
		destinationType: 'url',
		allowEdit: false,
		quality: 100,
		saveToPhotoAlbum: true
	}, function(ret, err) {
		if (ret && ret.data) {
			setTimeout(function(){
				UIAlbumBrowser.scan({
					type: 'image',
					count: 30,
					sort: {
						key: 'time',
						order: 'desc'
					},
					thumbnail: {
						w: 300,
						h: 300
					}
				}, function(ret) {
					if (ret) {
						vuedata.photos.unshift(ret.list[0]);
						vuedata.new_label_path.push(ret.list[0].path);
						api.execScript({
							script:'changeData("#pickNum",'+ getTotalNum() +');'
						});
					}
				});
			},500);
			
		}
	});
}
</script>
</html>
